import React from 'react'
import { Button, ConfigProvider, ThemeConfig } from 'antd'
import {
  parmaryButtonTheme,
  successButtonTheme,
  warningButtonTheme,
  errorButtonTheme,
  purpleButtonTheme,
} from '@/theme/antd/Button'

type ThemeType =
  | 'primary'
  | 'success'
  | 'warning'
  | 'error'
  | 'purple'
  | 'custom'

const ThemeComponent: React.FC<{
  type?: ThemeType
  children?: React.ReactNode
  themeConfig?: ThemeConfig
  onClick?: () => void
}> = (props) => {
  const { type = 'primary', children, themeConfig, onClick } = props
  let theme: ThemeConfig = parmaryButtonTheme
  switch (type) {
    case 'primary':
      theme = parmaryButtonTheme
      break
    case 'success':
      theme = successButtonTheme
      break
    case 'warning':
      theme = warningButtonTheme
      break
    case 'error':
      theme = errorButtonTheme
      break
    case 'purple':
      theme = purpleButtonTheme
      break
    default:
      theme = themeConfig as ThemeConfig
      break
  }

  return (
    <>
      <ConfigProvider wave={{ disabled: true }} theme={theme}>
        <Button onClick={onClick}>{children}</Button>
      </ConfigProvider>
    </>
  )
}

export default ThemeComponent
